<template>
  <!-- 首页 start -->
  <div class="homeIndex">
    <div class="banner">
      <img src="@/assets/banner.jpg" alt="" />
    </div>
    <div class="process">
        <img src="@/assets/banner2.png" alt="">
      </div>    
    <div class="news w1200">
      <!--政策资讯-->
      <div class="project news-list mb20">
        <div class="content-title">
          <div class="titles fl">
            <a href="/doc/index/lists/catid/5079.html" target="_blank">
              <span style="color: #db1d28">新闻 · </span
              ><span style="color: #444444">政策资讯asdfsdf测试</span>
            </a>
          </div>
          <div class="get-more fr">
            <a href="/doc/index/lists/catid/5079.html" target="_blank"
              ><img src="@/assets/more.png" alt="获取更多"
            /></a>
          </div>
        </div>

        <div class="line" style="margin-top: 15px; margin-bottom: 22px"></div>
        <div class="items pro">
          <ul>
            <li v-for="(item, index) in dataList.infoList" :key="index">
              <div>
                <small>{{ item.publish_time }}</small>
                {{ item.title }}
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--政策资讯-->
      <!--学习帮助-->
      <div class="project news-list mb20">
        <div class="content-title">
          <div class="titles fl">
            <a href="/doc/index/lists/catid/5104.html" target="_blank">
              <span style="color: #db1d28">新闻 · </span
              ><span style="color: #444444">学习帮助</span>
            </a>
          </div>
          <div class="get-more fr">
            <a href="/doc/index/lists/catid/5104.html" target="_blank"
              ><img src="@/assets/more.png" alt="获取更多"
            /></a>
          </div>
        </div>

        <div class="line" style="margin-top: 15px; margin-bottom: 22px"></div>
        <div class="items pro">
          <ul>
            <li v-for="(item, index) in dataList.helpList" :key="index">
              <div
                href="http://www.boaiyun.cn/doc/index/show/id/103030/catid/5104.html"
                target="_blank"
              >
                <small>{{ item.publish_time }}</small>
                {{ item.title }}
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--学习帮助-->
    </div>
    <!-- 推荐课程 start -->
    <div class="course-con-jl">
      <div class="course-title">
        推荐课程
        <div class="line"></div>
        <a href="javascript:jumpAjaxPage('grade/gradeList');" class="more-btn"
          >更多</a
        >
      </div>
      <div class="course-con1">
        <ul>
          <li class="on">推荐</li>
        </ul>
        <dl>
          <div class="w-1200">
            <dd v-for="(item, index) in dataList.recommendedList" :key="index">
              <a href="#" class="pic_act">
                <!-- <img :src="'https:'+item.courseImgView" /> -->
                <img
                  src="https://static.lllnet.cn/course/F10020002.jpg"
                  alt=""
                />
              </a>
              <div class="c-title">
                <a href="#">{{ item.courseName }}</a>
              </div>
              <!-- <div class="c-info">学时：9 | 截止：2025-12-31</div> -->
            </dd>
          </div>
        </dl>
      </div>
    </div>
    <!-- 推荐课程 end -->
  </div>
  <!-- 首页 end -->
</template>
<script lang="ts" setup>
import { defineComponent } from "vue";
import headers from "@/components/header.vue";
import api from "@/api/index";
import { onMounted, reactive, ref } from "vue";
const dataList = reactive({
  recommendedList: [],
  helpList: [],
  infoList: [],
});
onMounted(() => {
  getwebList();
  getdashbordList();
});
//获取网页列表
const getdashbordList = async () => {
  const queryParams = {};
  const res = await api.dashbordList(queryParams);
  if (res.code == 200) {
    dataList.helpList = res.data.map3;
    dataList.infoList = res.data.map4;
  }
};
//获取网页列表
const getwebList = async () => {
  const queryParams = {};
  const res = await api.articleList(queryParams);
  if (res.code == 200) {
    dataList.recommendedList = res.data;
  }
};
</script>
<style lang="scss" scoped>
.homeIndex {
  width: 100%;
  margin-top: 88px;
  .banner {
    height: 446px;
    img {
      width: 100%;
    }
  }
  .course-con-jl {
    width: 1200px;
    margin: 40px auto 0 auto;
    .course-title {
      background: url(https://static.lllnet.cn/gclc-jlxxw/images/tuijian-icon1.svg)
        left 8px no-repeat;
      height: 46px;
      line-height: 46px;
      font-size: 30px;
      font-weight: bold;
      position: relative;
      text-indent: 50px;
      color: #006dff;
      .line {
        background-color: #e5f0ff;
        height: 10px;
        line-height: 10px;
        font-size: 0;
        position: absolute;
        top: 18px;
        right: 60px;
        width: 939px;
      }
      a.more-btn {
        background: url(https://static.lllnet.cn/gclc-jlxxw/images/more-icon.svg)
          right center no-repeat;
        background-size: 16px 16px;
        padding-right: 21px;
        font-size: 12px;
        position: absolute;
        right: 0;
        top: 0;
        color: #999;
        font-weight: normal;
      }
    }
    .course-con1 {
      overflow: hidden;
      padding-top: 20px;
      ul {
        height: 30px;
        line-height: 30px;
        margin-bottom: 5px;
        position: relative;
        li {
          float: left;
          font-size: 14px;
          margin-right: 10px;
          height: 30px;
          line-height: 30px;
          cursor: pointer;
          border-radius: 50px;
          background-color: #e5f0ff;
          color: #006dff;
          display: inline-block;
          text-align: center;
          padding: 0 20px;
        }
        li.on {
          color: #fff;
          background-color: #006dff;
        }
      }
      dl {
        overflow: hidden;
        dd {
          width: 216px;
          margin-right: 30px;
          float: left;
          margin-top: 20px;
          img {
            width: 216px;
            height: 135px;
          }
        }
        dd a.pic_act {
          width: 216px;
          height: 135px;
          border-radius: 5px;
          overflow: hidden;
          display: block;
        }
        dd .c-title {
          padding: 5px 0 0 0;
          a {
            height: 32px;
            line-height: 32px;
            width: 216px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            font-size: 16px;
          }
        }
        dd .c-info {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
.w-1200 {
  width: 110%;
}
a:hover {
  text-decoration: none;
  color: #2a3138;
  transition: background-color 0.2s ease 0s, color 0.2s linear 0s;
  outline: none;
}
a:hover {
  color: #006dff;
}
.pic_act img {
  transition: 0.3s transform;
  transform: translateZ(0);
}
.pic_act:hover img {
  transform: scale(1.1, 1.1);
  transition: 0.3s transform;
}
.w1200 {
  width: 1200px;
  margin: 0 auto;
}
.project {
  margin-left: 0;
}
.project.news-list {
  width: 570px !important;
  border: none;
  float: left;
  overflow: hidden;
}
.titles a {
  font-size: 22px;
  height: 30px;
  line-height: 30px;
  background: url(../img/images/title-bg.jpg) no-repeat 0 2px;
  padding-left: 15px;
}
#center .get-more {
  float: right;
}
.line {
  border-bottom: 1px solid #eeeeee;
}
.hot {
  margin-top: 15px;
  display: flex;
}
.news {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
.hot img {
  width: 162px;
  height: 106px;
}
.news-list .hot content {
  width: 380px;
  margin-left: 20px;
}
.news-list .hot h2,
.content-right .news-list .hot h2 {
  line-height: 30px;
  position: relative;
  margin-top: -5px;
}
.news h2 a {
  font-size: 20px;
  color: #333333;
}
.news-list .hot p,
.content-right .news-list .hot p {
  position: relative;
  margin-top: -8px;
}
.news-list .hot p,
.content-right .news-list .hot p,
.content-right .news-list .top-list p {
  font-size: 14px;
  color: #888888;
  line-height: 22px;
}
.news-list .hot span.content .seemore,
.content-right .news-list .hot span.content .seemore,
.content-right .news-list .top-list span.content .seemore {
  color: #db2e35;
}
a:link,
a:visited,
a:active,
a:hover,
a:focus {
  text-decoration: none;
  outline-style: none;
}
.cl {
  clear: both;
}
ol,
ul {
  list-style: none;
  margin: 0;
  margin-left: -39px;
}
.news-list ul li {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 35px;
  overflow: hidden;
  border: none;
  margin-bottom: 10px;
  background: url(@/assets/dot.png) no-repeat 10px center;
}
.news-list ul li div {
  font-size: 14px;
  line-height: 35px;
  margin-left: 25px;
  color: #555555;
  display: block;
  overflow: hidden;
  margin-right: 20px;
}
.news-list ul li div:hover {
  color: #006dff;
  cursor: pointer;
}
.news-list ul li div small {
  float: right;
  color: #999;
  font-size: 12px;
  padding-left: 20px;
}
.content-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.process{
  width: 100%;
  height: 200px;
  img{
    width: 100%;
  }
}
</style>
